<template>
  <el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246); box-shadow: rgba(0, 21, 155, 0.35) 2px 0 6px">
   <el-aside :style="AsideObj">
        <el-menu
            style="height: 100vh; overflow-x: hidden"
            background-color="rgb(48, 65, 86)"
            :collapse="isCollapse"
            :collapse-transition="false"
            text-color="#fff"
            active-text-color="#ffd04b"
            :router="true"
          >
          <div style="height: 80px; color: white; font-weight: bold;
           display: flex; align-items: center; justify-content: center">
            <img src="../assets/icon.png" alt="" style="height: 30px">
            <span style="margin-left: 5px" v-show="isShow">碳索生活管理系统</span>
          </div>

          <el-sub-menu index="1">
            <template #title>
              <el-icon><HomeFilled /></el-icon>
                <span>用户管理</span>
            </template>

            <el-menu-item index="/manage/user">
              <el-icon><List /></el-icon>
              <span slot="title">用户列表</span>
            </el-menu-item>

            <el-menu-item index="/manage/person">
              <el-icon><UserFilled /></el-icon>
              <span slot="title">个人中心</span>
            </el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/manage/carboner">
            <el-icon><Postcard /></el-icon>
            <span slot="title">碳行者管理</span>
          </el-menu-item>

          <el-menu-item index="/manage/activity">
            <el-icon><Promotion /></el-icon>
            <span slot="title">发布活动</span>
          </el-menu-item>

          <el-sub-menu index="2">
            <template #title>
              <el-icon><Collection /></el-icon>
                <span>任务管理</span>
            </template>

            <el-menu-item index="/manage/taskDetail">
              <el-icon><Document /></el-icon>
              <span slot="title">任务详情</span>
            </el-menu-item>

            <el-menu-item index="/manage/taskCheck">
              <el-icon><Checked /></el-icon>
              <span slot="title">任务审核</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <el-icon><SwitchFilled /></el-icon>
                <span>物物交换管理</span>
            </template>

            <el-menu-item index="/manage/exchange">
              <el-icon><Switch /></el-icon>
              <span slot="title">物品交换</span>
            </el-menu-item>

            <el-menu-item index="/manage/donation">
              <el-icon><MessageBox /></el-icon>
              <span slot="title">物品捐赠</span>
            </el-menu-item>
          </el-sub-menu>

        </el-menu>
      </el-aside>
    </el-aside>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import { defineProps } from 'vue';
import emitter from '@/utils/emitter'
import router from '@/router';
defineProps(['send-data'])

const showLog = ref(true)

const isCollapse = ref(false)
const isShow = ref(true)
const sideWidth = ref(200)
const AsideObj = ref({
   width: '200px'
})

  emitter.on('Aside', (value:any) => {
    showLog.value = value
    if(showLog.value){
      AsideObj.value.width = '64px'
      isCollapse.value = true
      isShow.value = false
      sideWidth.value = 64
    }else{
      AsideObj.value.width = '200px'
      isCollapse.value = false
      isShow.value = true
      sideWidth.value = 200
    }
    
})




</script>
<style scoped>

</style>